<template>
  <div class="school-score">
    <!-- <div class="title">专业分数线</div> -->
    <div class="form">
      <div class="form-item">
        <div class="label">年份:</div>
        <div class="select">
          <MySelect
            :options="yearList"
            v-model="form.year"
            :showClear="true"
            @update:modelValue="handleYearChange"
          />
        </div>
      </div>
      <div class="form-item">
        <div class="label">选科:</div>
        <div class="select">
          <MySelect
            :options="subjectList"
            v-model="form.subject"
            :showClear="true"
            @update:modelValue="handleSubjectChange"
          />
        </div>
      </div>
      <div class="form-item">
        <div class="label">批次:</div>
        <div class="select">
          <MySelect
            :options="batchList"
            v-model="form.batch"
            :showClear="true"
            @update:modelValue="handleBatchChange"
          />
        </div>
      </div>
      <div
        class="form-item"
        v-if="!isHistoryBatchType && majorGroupList.length > 0"
      >
        <div class="label">专业组:</div>
        <div class="select">
          <MySelect
            :options="majorGroupList"
            v-model="form.majorGroup"
            :showClear="true"
            @update:modelValue="handleMajorChange"
          />
        </div>
      </div>
    </div>
    <div class="table">
      <MyTable :columns="tableColumns" :data="tableData" rowKey="majorName" />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import MySelect from '@/components/MySelect.vue';
import MyTable from '@/components/MyTable.vue';
import { getSubjectName } from '@/utils/subjectData';
import {
  getCollegeHistoryScoreList,
  getCollegeMajorGroupList,
} from '@/api/collegeSearch';

// 获取当前的路由对象
const route = useRoute();

const isHistoryBatchType = ref(false); // 是否是历史批次

const props = defineProps({
  schoolFilterParams: {
    type: Object,
    default: () => {},
  },
  localRegionId: {
    type: String,
    default: '',
  },
});
const form = ref({
  year: '',
  subject: '',
  batch: '',
  majorGroup: '',
});

const yearList = ref([]);

const subjectList = ref([]);

const batchList = ref([]);

const majorGroupList = ref([]);

const tableColumns = ref([
  {
    label: '专业名称',
    prop: 'groupName',
  },
  {
    label: '选科要求',
    prop: 'limitSubject',
  },
  {
    label: '最低分/最低位次',
    prop: 'minScore',
  },
  {
    label: '计划/录取人数',
    prop: 'admissionNum',
  },
  {
    label: '批次线差',
    prop: 'lineDiffNum',
  },
]);

const tableData = ref([]);

//获取列表数据
const getCollegeHistoryScoreListFn = async () => {
  //通过form.value.majorGroup拿到对应的majorGroupList里的cpgId，再请求接口
  const majorGroupItem = majorGroupList.value.find(
    (item) => item.value === form.value.majorGroup
  );
  const params = {
    localRegionId: props.localRegionId,
    recordYear: form.value.year,
    subjectType: form.value.subject,
    collegeId: route.query.dataId,
    groupLevel: '2',
    pageSize: '999',
    pageNo: '1',
  };
  if (majorGroupItem) {
    params.searchParentId = majorGroupItem.cpgId;
  }
  const yearItem = yearList.value.find(
    (item) => item.value === form.value.year
  );
  if (yearItem && yearItem.isHistoryBatchType === '2') {
    //普通批次
    params.batchType = form.value.batch;
  } else {
    //历史批次
    params.historyBatchType = form.value.batch;
  }
  const res = await getCollegeHistoryScoreList(params);
  if (res.code === 200) {
    tableData.value = res.data.map((item) => {
      const minScore = item.minScore === 0 ? '-' : item.minScore;
      const minRank = item.minRank === 0 ? '-' : item.minRank;
      const admissionNum = item.admissionNum;
      const plannedNum = item.plannedNum;
      let peoplesNum = '-';
      if (admissionNum !== 0) {
        peoplesNum = '录取人数：' + item.admissionNum;
      } else {
        if (plannedNum !== 0) {
          peoplesNum = '计划人数：' + item.plannedNum;
        } else {
          peoplesNum = '-';
        }
      }
      return {
        groupName: item.groupName,
        limitSubject: getSubjectName(item.limitSubject),
        minScore: minScore + '/' + minRank,
        admissionNum: peoplesNum,
        lineDiffNum: item.lineDiffNum || '-',
        exContent: item.showContent, //  额外内容
      };
    });
  }
};
//获取筛选专业组列表
const getCollegeMajorGroupListFn = async () => {
  if (form.value.year === '') {
    return;
  }
  const params = {
    localRegionId: props.localRegionId,
    recordYear: form.value.year,
    collegeId: route.query.dataId,
    groupLevel: '1',
  };
  const yearItem = yearList.value.find(
    (item) => item.value === form.value.year
  );
  if (yearItem && yearItem.isHistoryBatchType === '2') {
    //普通批次
    params.batchType = form.value.batch;
  } else {
    //历史批次
    params.historyBatchType = form.value.batch;
  }
  const res = await getCollegeMajorGroupList(params);
  if (res.code === 200) {
    majorGroupList.value = res.data.map((item) => {
      return {
        label: item.groupName,
        value: item.groupCode,
        cpgId: item.cpgId,
      };
    });
    //组装参数完成后将筛选条件拆分出来再请求接口
    getCollegeHistoryScoreListFn();
  }
};

//切换年份
const handleYearChange = (value) => {
  if (value === '') {
    return;
  }
  form.value.batch = ''; //切换年份要将批次置空
  form.value.majorGroup = ''; //切换年份要将专业组置空

  //找到yearList对应的value，赋值给form.value.year
  const yearItem = yearList.value.find((item) => item.value === value);
  if (yearItem) {
    props.schoolFilterParams.forEach((item) => {
      //重新赋值筛选条件
      if (
        item.filterKey === 'historyBatchType' &&
        yearItem.isHistoryBatchType === '1'
      ) {
        //批次
        //根据form.value.year拿到对应的yearList里的isHistoryBatchType字段，判断是否是历史批次
        batchList.value = JSON.parse(item.filterContent).map((subItem) => {
          return {
            label: subItem,
            value: subItem,
          };
        });
        // form.value.batch = batchList.value[0].value;
        //subjectList重新配置物理/历史 、 理科/文科
        subjectList.value.map((subItem) => {
          if (subItem.value === '11') {
            subItem.label = '理科';
          } else if (subItem.value === '12') {
            subItem.label = '文科';
          }
        });
        // 隐藏专业组选项
        isHistoryBatchType.value = true;
      }
      if (
        item.filterKey === 'batchType' &&
        yearItem.isHistoryBatchType === '2'
      ) {
        //批次
        //根据form.value.year拿到对应的yearList里的isHistoryBatchType字段，判断是否是历史批次
        batchList.value = JSON.parse(item.filterContent).map((subItem) => {
          return {
            label: subItem.key,
            value: subItem.value,
          };
        });
        //subjectList重新配置物理/历史 、 理科/文科
        subjectList.value.map((subItem) => {
          if (subItem.value === '11') {
            subItem.label = '物理';
          } else if (subItem.value === '12') {
            subItem.label = '历史';
          }
        });
        // 隐藏专业组选项
        isHistoryBatchType.value = false;
      }
    });
  }
  getCollegeMajorGroupListFn(); // 尝试去拿到专业组列表，不一定有专业组列表，所以不一定能拿到数据
};
//切换选科
const handleSubjectChange = (value) => {
  getCollegeMajorGroupListFn(); // 重新请求筛选专业组
};
//切换批次
const handleBatchChange = (value) => {
  getCollegeMajorGroupListFn(); // 重新请求筛选专业组
};
//切换专业组
const handleMajorChange = (value) => {
  form.value.majorGroup = value;
  getCollegeHistoryScoreListFn();
};
//组装from参数
const handleFrom = () => {
  //遍历props.schoolFilterParams，将筛选条件赋值给form
  props.schoolFilterParams.forEach((item) => {
    if (item.filterKey === 'recordYear') {
      //年份
      yearList.value = JSON.parse(item.filterContent).map((subItem) => {
        return {
          label: subItem.key,
          value: subItem.value,
          isHistoryBatchType: subItem.isHistoryBatchType,
        };
      });
      form.value.year = yearList.value[1].value;
    }
    if (item.filterKey === 'subjectType') {
      //选科
      subjectList.value = JSON.parse(item.filterContent).map((subItem) => {
        return {
          label: subItem.key,
          value: subItem.value,
        };
      });
      form.value.subject = subjectList.value[0].value;
    }

    if (item.filterKey === 'batchType') {
      //批次
      //根据form.value.year拿到对应的yearList里的isHistoryBatchType字段，判断是否是历史批次
      const year = form.value.year;
      const yearItem = yearList.value.find((item) => item.value === year);
      if (yearItem && yearItem.isHistoryBatchType === '2') {
        batchList.value = JSON.parse(item.filterContent).map((subItem) => {
          return {
            label: subItem.key,
            value: subItem.value,
          };
        });
        // form.value.batch = batchList.value[0].value;
      }
    }
    if (item.filterKey === 'historyBatchType') {
      //批次
      //根据form.value.year拿到对应的yearList里的isHistoryBatchType字段，判断是否是历史批次
      const year = form.value.year;
      const yearItem = yearList.value.find((item) => item.value === year);
      if (yearItem && yearItem.isHistoryBatchType === '1') {
        batchList.value = JSON.parse(item.filterContent).map((subItem) => {
          return {
            label: subItem,
            value: subItem,
          };
        });
        // form.value.batch = batchList.value[0].value;
      }
    }
  });
};
//监控props.schoolFilterParams变化
watch(
  () => props.schoolFilterParams,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      handleFrom(); //组装参数
      getCollegeMajorGroupListFn(); // 尝试去拿到专业组列表，不一定有专业组列表，所以不一定能拿到数据
    }
  },
  {
    deep: true,
  }
);
onMounted(() => {
  handleFrom(); //组装参数
  getCollegeMajorGroupListFn();
});
</script>

<style scoped lang="scss">
.school-score {
  padding: 0 40px 40px 40px;
  position: relative;
  .title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
  }
  .form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 10;
    padding: 24px 0 12px 0;
    .form-item {
      display: flex;
      align-items: center;
      .label {
        font-size: 22px;
        color: #333;
        margin-right: 10px;
      }
      .select {
        width: 300px;
      }
    }
  }
  .table {
    padding-top: 20px;
  }
}
</style>
